<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/9/6
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="/dist/jquery/jquery-1.8.3.js"></script>
<html>
<head>
    <title>getAjax2JsonJsp的异步传参数到后台,后台返回JackJson数据给前台</title>
    <style type="text/css">
        #id-div-form{
            border: solid;
            padding: 30px 30%;
        }
    </style>
</head>
<body>
111111
<hr>
<div id="id-div-form">
    <form  id="id-from">
        <input type="text" name="rname" placeholder="账号"><br>
        <input type="text" name="rpwd" placeholder="密码"><br>
        <input type="button" value="登录角色">
        <input type="reset" value="重置"><br>
    </form>
</div>
<hr>
</body>
</html>
<script type="text/javascript">


    /*444表单提交的序列化传递参数给后台*/
   $("input[type=button]").click(function () {
       console.log("444")
       var str2Serializable=$("#id-form").serialize();
       console.log("======="+str2Serializable);

       $.ajax({
           type:"post",
           url:"/serializable2Role111.dojava",//http://localhost:8080/ZViewTest/getAjax2Json.jsp
           data:$("#id-from").serialize(),

           success:function (result) {
               console.log("serializable2Role111222result======");
               console.log(result);
           }

       });
   });




    /*333前台==>后台,传递的参数为数组格式的自定义的引用数据类型*/
    //待删除的参数,数组格式
    var data2Param2Role=[
        {rid:"1",rname:"王大",rpwd:"111",rflag:"1"},
        {rid:"2",rname:"李二",rpwd:"222",rflag:"2"},
        {rid:"3",rname:"张三",rpwd:"333",rflag:"3"},
        {rid:"4",rname:"赵四",rpwd:"444",rflag:"4"},
    ];

    $.ajax({
        type:"post",
        url:"/deleteByRole111.dojava",//http://localhost:8080/ZViewTest/getAjax2Json.jsp
        contentType:"application/json",
        data:JSON.stringify(data2Param2Role),

        success:function (result) {
            console.log("deleteByRole111.dojava====result====");
            console.log(result);
        }

    });

    /*222前台==>后台,传递的参数为数组格式基本引用数据类型*/
    //待删除的参数,数组格式
    var data2Param2Array=[1,3,5,7,8];

    $.ajax({
        type:"post",
        url:"/deleteById111.dojava",//http://localhost:8080/ZViewTest/getAjax2Json.jsp
        contentType:"application/json",
        data:JSON.stringify(data2Param2Array),

        success:function (result) {
            console.log("deleteById111.dojava====result====");
            console.log(result);
        }

    });

    /*111前台==>后台的Ajax请求,及模型驱动(ModelDriven)的参数自动绑定*/
    //后台==>前台的Ajax请求结果集JSON格式,
    //定义Json格式的传入参数
    //向后台请求json格式数据
    var data2Param={
        mid:555,
        mname:"任五",
        mpwd:"555",
        mflag:"5",
        pagination:{
            totalRecords:30,
            maxRows:10,
            currPageNo:2
        },
    };

    $.ajax({
        type:"post",
        url:"/getAjax2JsonJsp111.dojava",//http://localhost:8080/ZViewTest/getAjax2Json.jsp
        contentType:"application/json",
        data:JSON.stringify(data2Param),//向后台请求json格式数据

        success:function (result) {
            console.log("getAjax2JsonJsp111.dojava===result====");
            console.log(result);
            console.log(result.roleList);
        }

    });

    console.log("111");
    $(function () {
        console.log("222")
    });

</script>
